<!-- 删除等操作的确认弹出框 -->
<template>
	<view>
		<view class="confirmBox" v-if="isPopUp">

			<view class="titleContent">
				<view class="title">{{title}}</view>
			</view>


			<view class="buttonGroup">
				<button class="cancel" @click="cancel">再想想</button>
				<button class="confirm" @click="confirm">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "confirmPop",
		props: {
			isPopUp: {
				type: Boolean,
				default: false
			},
			title: {
				default: '请填写默认标题',
				type: String
			},
		},
		data() {
			return {


			};
		},
		methods: {
			cancel() {

				this.$emit('cancel');

			},
			confirm() {

				this.$emit('confirm');

			}
		}


	}
</script>

<style lang="scss" scoped>
	.confirmBox {
		box-sizing: border-box;
		z-index: 999999;
		width: 494rpx;
		height: 292rpx;
		position: absolute;
		left: 50vw;
		top: 50vh;
		border-radius: 14rpx;
		background: rgba(255, 255, 255, 1);
		transform: translate(-250rpx, -143rpx);
		box-sizing: border-box;
		color: rgba(30, 30, 32, 1);

		.titleContent {
			width: 100%;
			position: absolute;
			top: 60rpx;
			display: flex;
			justify-content: center;
			.title {
				box-sizing: border-box;
				font-size: 32rpx;
				color: rgba(30, 30, 32, 1);
			}
		}


		.buttonGroup {
			width: 384rpx;
			justify-content: space-between;
			display: flex;
			position: absolute;
			padding: 0;
			left: 55rpx;
			bottom: 64rpx;

			button {
				margin: 0;
				width: 158rpx;
				height: 54rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 27rpx;
				font-size: 24rpx;

			}

			.cancel {
				border: 1rpx solid rgba(179, 130, 75, 1);
				color: rgba(179, 130, 75, 1);
				background: rgba(255, 255, 255, 1);
			}

			.confirm {
				color: rgba(255, 255, 255, 1);
				background: rgba(179, 130, 75, 1);
			}
		}

	}
</style>